<template>
  <div class="register-wrapper">
    <div class="register-header">
      <div class="register-logo-box">
        <img src="../../assets/images/login/logo.png" alt="">
      </div>
      <div class="register-title">
        <img src="../../assets/images/login/login_title_font.png" alt="">
      </div>
    </div>
    <div class="register-content">
      <ul class="content-box">
        <li class="content-list pad-bot15">
          <span class="list-icon icon-name"></span>
          <input class="list-input" type="text" v-model="username" placeholder="请输入用户名">
        </li>
        <li class="content-list pad-bot15">
          <span class="list-icon icon-name"></span>
          <input class="list-input" type="text" v-model="realName" placeholder="请输入用户真实姓名">
        </li>
        <li class="content-list pad-bot15">
          <span class="list-icon icon-password"></span>
          <input class="list-input" type="text" v-model="registerPas" placeholder="请输入密码" disabled>
        </li>
        <li class="content-list pad-bot15">
          <span class="list-icon iconfont icon-shoujihao iconfont-sty"></span>
          <input class="list-input" type="text" v-model="phone" placeholder="请输入手机号">
        </li>
        <li class="content-list pad-bot15">
          <span class="list-icon iconfont icon-danwei iconfont-sty"></span>
          <input class="list-input" type="text" v-model="unit" placeholder="请输入申请人所在单位">
        </li>
        <li class="content-list pad-bot15">
          <span class="list-icon iconfont icon-xitongtubiaoicon iconfont-sty"></span>
          <input class="list-input" type="text" v-model="email" placeholder="请输入邮箱">
        </li>
        <li class="content-list pad-bot15">
          <span class="list-icon icon-role"></span>
          <select class="list-input select-sty" :class="roleVal == 0 ? 'select-col' : ''" v-model="roleVal" name="">
            <option value="0">请选择申报角色</option>
            <option value="1">农户登录</option>
            <option value="2">企业用户登录</option>
          </select>
        </li>
        <li class="content-list">
          <button class="register-btn" @click="getRegister">注册</button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Register',
    data() {
      return {
        urls: {
          registerUrl: '/user/register'
        },
        roleVal: 0,
        username: '',
        realName: '',
        registerPas: '123456',
        phone: '',
        unit: '',
        email: '',
      }
    },
    methods: {
      getRegister() {
        if(this.factory.isEmpty(this.username)){
          this.$notify({title: '警告',duration: 1000, message: '用户名不能为空', type: 'warning'});
          return false;
        }
        if(this.factory.isEmpty(this.realName)){
          this.$notify({title: '警告',duration: 1000, message: '用户真实姓名不能为空', type: 'warning'});
          return false;
        }
        if(this.factory.isEmpty(this.phone)){
          this.$notify({title: '警告',duration: 1000, message: '手机号不能为空', type: 'warning'});
          return false;
        }else{
          if(!this.factory.checkReg(this.phone,'手机')){
            this.$notify({title: '警告',duration: 1000, message: '请输入正确的手机号', type: 'warning'});
            return false;
          }
        }
        if(this.factory.isEmpty(this.unit)){
          this.$notify({title: '警告',duration: 1000, message: '申请人所在单位不能为空', type: 'warning'});
          return false;
        }
        if(!this.factory.isEmpty(this.email)){
          if(!this.factory.checkReg(this.email,'邮箱')) {
            this.$notify({title: '警告', duration: 1000, message: '请输入正确的邮箱', type: 'warning'});
            return false;
          }
        }
        let param = {
          username: this.username,
          realName: this.realName,
          phone: this.phone,
          unit: this.unit,
          email: this.email
        };
        console.log("param",param);
        this.axios.post(this.param.remoteUrl + this.urls.registerUrl,param).then(function(res){
          console.log("res",res);
          if(res.status == 200){
            this.$router.push({
              path: '/login'
            });
          }
        }).catch(function(error){
          console.log("error",error);
        });
      }
    },
    mounted() {
      sessionStorage.setItem("userInfo","{}");
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../assets/styles/base_style';
  .register-wrapper {
    height: 100%;
    background: url("../../assets/images/register/register_bg.png") no-repeat;
    background-size: 100% 100%;
    overflow-y: auto;
    @include scrollbarStyle(10px, 10px);
    .register-header {
      padding: 3% 0 1% 0;
      text-align: center;
    }
    .register-content {
      padding-bottom: 20px;
      .content-box {
        width: 380px;
        padding: 45px 40px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 4px;
        box-shadow: #939393 1px 1px 2px 0;
        .pad-bot15 {
          padding-bottom: 15px;
        }
        .content-list {
          position: relative;
          .list-icon {
            display: inline-block;
            position: absolute;
            left: 12px;
          }
          .icon-name {
            background: url("../../assets/images/login/login_name_icon.png") no-repeat;
            background-size: 100% 100%;
            width: 22px;
            height: 26px;
            top: calc((60px - 30px) / 2);
          }
          .icon-password {
            background: url("../../assets/images/login/login_password_icon.png") no-repeat;
            background-size: 100% 100%;
            width: 22px;
            height: 25px;
            top: calc((60px - 31px) / 2);
          }
          .icon-role {
            background: url("../../assets/images/login/login_role_icon.png") no-repeat;
            background-size: 100% 100%;
            width: 24px;
            height: 26px;
            top: calc((60px - 32px) / 2);
          }
          .iconfont-sty{
            color: #64DC36;
            font-size: 28px;
            top: 12px;
          }
          .list-input {
            width: calc(100% - 60px);
            height: 30px;
            padding: 10px 10px 10px 50px;
            font-size: 18px;
            color: #333;
            background: rgba(255, 255, 255, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.7);
            border-radius: 5px;
            outline: none;
          }
          .list-input:disabled{
            color: #959595;
            background: rgba(223, 221, 221, 0.6);
          }
          .select-sty {
            width: 100%;
            height:52px;
          }
          .select-col {
            color: #757575;
          }
          .remember-text,
          .forget-pas,
          .goto-register {
            font-size: 16px;
            color: #555;
          }
          .remember-text {
            .remember-pas {
              width: 20px;
              height: 20px;
              margin-right: 10px;
              position: relative;
              top: 5px;
            }
          }
          .forget-pas, .goto-register {
            text-decoration: underline;
            cursor: pointer;
          }
          .forget-pas {
            float: left;
          }
          .goto-register {
            float: right;
          }
          .register-btn {
            width: 100%;
            height: 50px;
            font-size: 20px;
            color: #fff;
            background: #3E931E;
            border: 1px solid rgba(113, 217, 36, 0.7);
            border-radius: 5px;
            cursor: pointer;
            box-shadow: #6A6A6A 2px 2px 2px 0;
          }
        }
        .remember-list:after {
          @include clearFloat;
        }
        .remember-list {
          margin: 15px 0;
        }
      }
    }
  }
</style>
